<template>

  <div id="app">
    <keep-alive>

      <router-view class="child-view" v-if="$route.meta.keepAlive"></router-view>

    </keep-alive>

    <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        transitionName: 'slide-left'
      }
    },
    mounted() {
      this._setRem();
      window.addEventListener('resize', this._setRem);//窗体大小改变
    },
    methods: {
      _setRem() { //移动端设置rem大小
        let width = document.body.clientWidth;
        document.getElementsByTagName('html')[0].style.fontSize = width / 10.8 + 'px';
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  #app
    height: 100%;

  .yd-popup-content
    border-radius: .25rem;

  .yd-cell-item
    padding: 0 !important;
    margin: 0 !important;
    textarea
      font-size: .4rem;
      height: 3.9rem;
      padding: 0 .2rem;

  .yd-cell-right
    padding: 0;

  .slide-left-enter
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);

  .slide-left-leave-active
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0)

</style>
